<template>
  <div id="home">
    <header>
      <!--<header-base />-->
      <aside id="banner_center">
        <div id="big_title">Explore Toxicology</div>
        <div id="small_title1">
          Quickly find chemical information from authoritative sources
        </div>
        <div id="search_box">
          <div id="search_try" @click="() => (isTry = !isTry)">
            <span>try</span>
            <i v-show="isTry" class="el-icon-caret-bottom"></i>
            <i v-show="!isTry" class="el-icon-caret-top"></i>
          </div>
          <div id="search_content">
            <input type="text" />
          </div>
          <div id="search_ico">
            <i class="el-icon-search"></i>
          </div>
          <div id="search_box_muen" v-if="!isTry">
            <h2>Not sure what to seach? Try these example:</h2>
            <ul>
              <li>
                <span class="title1">CAS#:</span
                ><span class="title2">700-06-1</span>
              </li>
              <li>
                <span class="title1">Chemlcal Name:</span
                ><span class="title2">Salicylic</span>
              </li>
              <li>
                <span class="title1">Publication:</span
                ><span class="title2">TR-580、TOX-48</span>
              </li>
              <li>
                <span class="title1">Project:</span
                ><span class="title2"
                  >Radiofrequency radiation emissions from cellular phones</span
                >
              </li>
              <li id="big_li">
                <span class="title1">Study Number:</span>
                <div>
                  <div>
                    <span class="title3">CEBS Accessioon Number:</span
                    ><span class="title2">002-02223-0003-0000-4</span>
                  </div>
                  <div>
                    <span class="title3">NTP TDMS Number</span
                    ><span class="title2">20203-01</span>
                  </div>
                </div>
              </li>
              <li id="big_li">
                <span class="title1">Study and Data Typer:</span>
                <div>
                  <div>
                    <span class="title3">NTP Study Type:</span
                    ><span class="title2">Micronucieus</span>
                  </div>
                  <div>
                    <span class="title3">Data Typer</span
                    ><span class="title2">Hematoloy</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div id="small_title2">
          <div v-for="(item, index) in smallTitle" :key="index">{{ item }}</div>
        </div>
      </aside>
      <aside id="banner_bottom">
        <div
          id="banner_bottom_box"
          v-for="(item, index) in bannerBottomData"
          :key="index"
        >
          <div id="banner_ico"><img :src="item.ico" alt="" /></div>
          <div id="banner_content">
            <div id="banner_content_size">{{ item.size }}<span>M</span></div>
            <div id="banner_content_name">{{ item.name }}</div>
          </div>
        </div>
      </aside>
    </header>
    <article id="h_pie">
      <div id="pie_li1">
        <table>
          <caption>
            Toxicity Category
          </caption>
          <thead>
            <tr>
              <th>Name</th>
              <th></th>
              <th style="text-align: right">Endpoints</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in ToxicityCategoryDate" :key="index">
              <td>
                <div
                  style="
                    background-color: #fff;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                  "
                >
                  <div :style="{ backgroundColor: item.color }"></div>
                </div>
              </td>
              <td style="padding-right: 60px">{{ item.name }}</td>
              <td>{{ item.Endpoint }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div id="pie"></div>
      <div id="pie_li2">
        <table>
          <caption>
            Features Domain
          </caption>
          <thead>
            <tr>
              <th>Name</th>
              <th></th>
              <th style="text-align: right">type</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in FeaturesDomain" :key="index">
              <td>
                <div
                  style="
                    background-color: #fff;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                  "
                >
                  <div :style="{ backgroundColor: item.color }"></div>
                </div>
              </td>
              <td style="padding-right: 60px">{{ item.name }}</td>
              <td>{{ item.type }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--<div id="pie_logo">
        <img src="../../assets/img/logo_2.png" alt="">
      </div>-->
    </article>

    <article id="h_sea">
      <h2>Functions of CancerS</h2>
      <div id="sea_box">
        <div class="sea">
          <div class="sea_title">Toxicity and Multi- dimensional Feature</div>
          <div class="sea_title2">
            Provide multi label and multi-dimensional characteristic data of
            toxicity of 100000 + compounds, which have been cleaned,
            standardized and analyzed
          </div>
          <div class="sea_ico"><i class="el-icon-right"></i></div>
        </div>
        <div class="sea">
          <div class="sea_title">Batch Search and Download</div>
          <div class="sea_title2">
            The data query of compounds can be completed through search and
            batch search, and specific Endpoint data sets can also be retrieved.
            These data are supported for download
          </div>
          <div class="sea_ico"><i class="el-icon-right"></i></div>
        </div>
        <div class="sea">
          <div class="sea_title">Benchmark</div>
          <div class="sea_title2">
            In benchmark, you can find a variety of toxicity prediction tests
            and calculation results under different characteristics, so as to
            broaden your research ideas
          </div>
          <div class="sea_ico"><i class="el-icon-right"></i></div>
        </div>
      </div>
      <div id="s_lodder"></div>
      <div id="x_looder"></div>
    </article>
    <article id="statistic">
      <div id="s_title">Statistic</div>
      <div id="s_infobox"></div>
      <div class="hei" style="display: inline-block; width: 398px"></div>
    </article>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      navData: [
        "Home",
        "Data Collections",
        "Search",
        "Donwload",
        "Statistics",
        "Benchmark",
        "Contact & About",
      ],
      navDataLight: "Home",
      smallTitle: ["Helpatotoxicity", "aspirm", "C9H8o4", "C1=CC=C(C=C1)C=O"],
      isTry: true,
      bannerBottomData: [
        {
          ico: "../assets/img/icon1.png",
          size: 123,
          name: "Compound",
        },
        {
          ico: "../assets/img/icon2.png",
          size: 123,
          name: "Toxicities",
        },
        {
          ico: "../assets/img/icon3.png",
          size: 123,
          name: "Endpoints",
        },
        {
          ico: "../assets/img/icon4.png",
          size: 123,
          name: "Compound",
        },
      ],
      pieData: [
        {
          name: "物理机",
          value: 20,
        },
        {
          name: "宿主机",
          value: 10,
        },
        {
          name: "云主机",
          value: 30,
        },
        {
          name: "网络设备",
          value: 40,
        },
        {
          name: "安全设备",
          value: 40,
        },
        {
          name: "应用系统",
          value: 40,
        },
        {
          name: "存储设备",
          value: 40,
        },
        {
          name: "网络服务",
          value: 40,
        },
        {
          name: "终端PC",
          value: 40,
        },
      ],
      myChart: null,
      myChartData1: [
        { name: "Acute Toxicity", value: 30 },
        { name: "Systematic Toxicity", value: 1 },
        { name: "Carcinogenicity", value: 3 },
        { name: "Cadiotoxicity", value: 5 },
        { name: "Hepatotoxicity", value: 1 },
        { name: "Endocrine Disruption", value: 12 },
        { name: "Respiratory Toxicity", value: 1 },
        { name: "Lrritation and Corrosion", value: 2 },
        { name: "CYP450", value: 5 },
        { name: "Ecotoxicity", value: 4 },
        { name: "Toxcast assay", value: 18 },
      ],
      myChartData2: [
        { name: "Chemicals Representation", value: 3 },
        { name: "Transcriptomics", value: 5 },
        { name: "Proteome", value: 3 },
        { name: "Metabolism", value: 3 },
        { name: "Compound properties", value: 1 },
        { name: "Comprehensive", value: 2 },
      ],
      ToxicityCategoryDate: [
        { name: "Acute Toxicity", Endpoint: "60", color: "#7846E5" },
        { name: "Systematic Toxicity", Endpoint: "1", color: "#9468FD" },
        { name: "Carcinogenicity", Endpoint: "3", color: "#737EFE" },
        { name: "Cadiotoxicity", Endpoint: "5", color: "#516AFE" },
        { name: "Hepatotoxicity", Endpoint: "1", color: "#50A9F8" },
        { name: "Endocrine Disruption", Endpoint: "12", color: "#3B56FF" },
        { name: "Respiratory Toxicity", Endpoint: "1", color: "#01B7DC" },
        { name: "Lrritation and Corrosion", Endpoint: "2", color: "#1FD77C" },
        { name: "CYP450", Endpoint: "5", color: "#41BCB3" },
        { name: "Ecotoxicity", Endpoint: "4", color: "#5AD8A6" },
        { name: "Toxcast assay", Endpoint: "183", color: "#3A95FF" },
      ],
      FeaturesDomain: [
        { name: "Chemicals Representation", type: "3", color: "#FFCF30" },
        { name: "Transcriptomics", type: "5", color: "#FFAA53" },
        { name: "Proteome", type: "3", color: "#FE9269" },
        { name: "Metabolism", type: "3", color: "#FE6A69" },
        { name: "Compound properties", type: "1", color: "#F54867" },
        { name: "Comprehensive", type: "2", color: "#F5488B" },
      ],
    };
  },
  mounted() {
    this.initCharts();
    // 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
    window.addEventListener("resize", () => {
      this.changeWidth();
    });
  },
  methods: {
    //控件header菜单激活
    navActiveClick(item) {
      this.navDataLight = item;
    },
    //设置pie图方法
    initCharts() {
      let that = this;
      // 初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("pie"));
      this.myChart = myChart;
      // 饼图调色板
      let color = [
        "#7846E5",
        "#9468FD",
        "#737EFE",
        "#516AFE",
        "#50A9F8 ",
        "#3B56FF",
        "#01B7DC",
        "#1FD77C",
        "#41BCB3 ",
        "#5AD8A6",
        "#3A95FF",
      ];
      var option = {
        tooltip: { formatter: "{b0}<br />Number: {c0}" },
        graphic: {
          //图形中间图片
          elements: [
            {
              type: "image",
              scaleX: 1,
              scaleY: 1,
              originX: 0,
              originY: 0,
              bounding: "all",
              style: {
                image: require("../assets/img/logo_2.png"), //你的图片地址
                width: 80,
                height: 80,
              },
              left: "center",
              top: "40%",
            },
            {
              type: "circle",
              style: {
                fill: "#fff",
              },
              left: "center",
              top: "40%",
            },
          ],
        },
        series: [
          {
            type: "pie",
            radius: ["38%", "50%"],
            center: ["50%", "45%"],
            label: {
              show: false,
            },
            labelLine: {
              length: 17,
              length2: 18,
            },
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 1,
                borderColor: "#F3F1FF ",
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(243, 241, 255, 0.5)",
              },
            },
            legend: {},

            data: that.myChartData1,
          },
          {
            type: "pie",
            radius: ["33%", "24%"],
            center: ["50%", "45%"],
            label: {
              show: false,
            },
            itemStyle: {
              // 此配置
              normal: {
                borderWidth: 1,
                borderColor: "#F3F1FF ",
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(243, 241, 255, 0.5)",
              },
            },

            data: that.myChartData2,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    //pie图刷新
    changeWidth() {
      this.myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
#home {
  height: 100%;
  width: 100%;
  position: relative;

  header {
    //font-size: 14.4*100px;
    width: 100%;
    background-image: url(~@/assets/img/banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    #banner_center {
      width: 100%;
      height: 4.6 * 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      #big_title {
        width: 5 * 100px;
        height: 0.83 * 100px;
        padding-top: 16px;
        font-size: 0.48 * 100px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 0.67 * 100px;
        padding-bottom: 0.16 * 100px;
      }
      #small_title1 {
        width: 5 * 100px;
        height: 0.22 * 100px;
        font-size: 0.18 * 100px;
        font-family: Helvetica;
        color: #ffffff;
        line-height: 0.22 * 100px;
        padding-bottom: 0.08 * 100px;
        text-align: center;
      }
      #small_title2 {
        width: 4.21 * 100px;
        height: 0.3 * 100px;
        color: #ffffff;
        line-height: 0.19 * 100px;
        font-size: 0.16 * 100px;
        font-family: Helvetica;
        display: flex;
        justify-content: space-between;
        padding-top: 0.08 * 100px;
      }
      #search_box {
        position: relative;
        width: 6.4 * 100px;
        height: 0.5 * 100px;
        line-height: 0.5 * 100px;
        //display: flex;
        font-size: 0.14 * 100px;
        font-family: Helvetica;
        //overflow: hidden;
        #search_try {
          width: 0.5 * 100px;
          height: 0.5 * 100px;
          background: #fff;
          padding-left: 0.2 * 100px;
          font-size: 14px;
          font-family: Helvetica;
          color: #17233d;
          float: left;
        }
        #search_content {
          float: left;
          width: 4.92 * 100px;
          height: 0.5 * 100px;
          margin-left: -1px;
          input {
            width: 100%;
            height: 100%;
            outline: none;
            background-color: #fff;
            font-size: 14px;
            font-family: Helvetica;
            color: #17233d;
          }
        }
        #search_ico {
          width: 0.78 * 100px;
          height: 0.5 * 100px;
          font-size: 0.28 * 100px;
          color: #fff;
          background: linear-gradient(to left, #5564fe, #8853ff);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        #search_box_muen {
          //display: none;
          width: 100%;
          background-color: #fff;
          position: absolute;
          top: 53px;
          z-index: 999;
          ul {
            padding-left: 30px;
            list-style: disc;
          }
          li {
            line-height: 25px;
          }

          h2 {
            width: 334px;
            height: 20px;
            font-size: 16px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #17233d;
            line-height: 20px;
            margin-left: 16px;
          }
          .title1 {
            width: 91px;
            height: 22px;
            font-size: 14px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #515a6e;
            line-height: 22px;
          }
          .title2 {
            width: 302px;
            height: 20px;
            font-size: 12px;
            font-family: Helvetica;
            color: #6e5bfe;
            line-height: 20px;
          }
          .title3 {
            width: 91px;
            height: 22px;
            font-size: 12px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #515a6e;
            line-height: 22px;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      #banner_center {
        width: 100%;
        height: 4.6 * 100px;
        //width: 1440px;
        //height: 460px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        #big_title {
          width: 80%;
          height: 0.83 * 100px;
          font-size: 0.48 * 100px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          line-height: 0.67 * 100px;
          padding-bottom: 0.16 * 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        #small_title1 {
          width: 70%;
          height: 0.22 * 100px;
          font-size: 0.18 * 100px;
          font-family: Helvetica;
          color: rgba(255,255,255,0.65);
          line-height: 0.22 * 100px;
          padding-bottom: 0.08 * 100px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        #small_title2 {
          width: 70%;
          height: 0.3 * 100px;
          color: #ffffff;
          line-height: 0.19 * 100px;
          font-size: 0.16 * 100px;
          font-family: Helvetica;
          display: flex;
          justify-content: space-between;
          padding-top: 0.08 * 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        #search_box {
          width: 90%;
          height: 0.5 * 100px;
          line-height: 0.5 * 100px;
          //display: flex;
          font-size: 0.14 * 100px;
          font-family: Helvetica;
          //overflow: hidden;
          #search_try {
            width: 10%;
            height: 0.5 * 100px;
            background: #fff;
            padding-left: 3%;
            font-size: 14px;
            font-family: Helvetica;
            color: #17233d;
            float: left;
          }
          #search_content {
            float: left;
            width: 67%;
            height: 0.5 * 100px;
            margin-left: -1px;
            input {
              width: 100%;
              height: 100%;
              outline: none;
              background-color: #fff;
              font-size: 14px;
              font-family: Helvetica;
              color: #17233d;
            }
          }
          #search_ico {
            width: 20%;
            height: 0.5 * 100px;
            font-size: 0.28 * 100px;
            color: #fff;
            background: linear-gradient(to left, #5564fe, #8853ff);
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    #banner_bottom {
      width: 100%;
      height: 0.9 * 100px;
      display: flex;
      justify-content: space-between;
      #banner_bottom_box {
        width: 3.48 * 100px;
        height: 0.9 * 100px;
        display: flex;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.3) 100%
        );
        filter: blur(0.1px);

        #banner_ico {
          width: 1.28 * 100px;
          height: 0.47 * 100px;
          padding: 0.22 * 100px 0.12 * 100px 0.21 * 100px 0;
          text-align: right;
        }
        #banner_content {
          width: 2.08 * 100px;
          height: 0.9 * 100px;
          text-align: left;
          #banner_content_size {
            font-size: 0.32 * 100px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #ffffff;
            margin: 0.13 * 100px 0 0.03 * 100px 0;
            span {
              height: 0.22 * 100px;
              font-size: 0.18 * 100px;
              font-family: Helvetica;
              color: #ffffff;
              line-height: 0.22 * 100px;
              margin-left: 0.06 * 100px;
            }
          }

          #banner_content_name {
            height: 0.22 * 100px;
            font-size: 0.18 * 100px;
            font-family: Helvetica;
            color: #ffffff;
            line-height: 0.22 * 100px;
          }
        }
      }
    }
    @media screen and (max-width: 768px) {
      #banner_bottom {
        width: 100%;
        //height: 0.9 * 100px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        #banner_bottom_box {
          position: relative;
          width: 45%;
          height: 0.45 * 100px;
          margin: 0 1%;
          display: flex;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.3) 100%
          );
          filter: blur(0.1px);

          #banner_ico {
            display: none;
            width: 1.28 * 100px;
            height: 0.235 * 100px;
            padding: 0.11 * 100px 0.12 * 100px 0.105 * 100px 0;
            text-align: left;
          }
          #banner_content {
            width: 2.08 * 100px;
            height: 0.45 * 100px;
            text-align: left;
            #banner_content_size {
              float: left;
              font-size: 0.32 * 100px;
              font-family: Helvetica-Bold, Helvetica;
              font-weight: bold;
              color: #ffffff;
              margin: 0.13 * 100px 0 0.03 * 100px 0;
              span {
                height: 0.11 * 100px;
                font-size: 0.18 * 100px;
                font-family: Helvetica;
                color: #ffffff;
                line-height: 0.11 * 100px;
                margin-left: 0.06 * 100px;
              }
            }

            #banner_content_name {
              float: right;
              height: 0.22 * 100px;
              font-size: 0.18 * 100px;
              font-family: Helvetica;
              color: #ffffff;
              line-height: 0.22 * 100px;
            }
          }
        }
      }
    }
  }
  #h_pie {
    width: 100%;
    height: 8 * 100px;
    //background: url(../../assets/img/banner.png) no-repeat;
    //background-size: 100% 100%;
    background-color: #f3f1ff;
    display: flex;
    justify-content: space-evenly;
    position: relative;
    #pie_li1 {
      width: 320px;
      //min-width: 320px;
      //height: 100%;
      margin-top: 150px;
      //position: absolute;
      //left: 1.2 * 100px;
      //top: 7.24 * 100px;
      //padding-left: 10%;
      caption {
        font-size: 0.28 * 100px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #17233d;
      }
      th {
        font-size: 0.14 * 100px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #808695;
      }
      tr {
        font-size: 0.14 * 100px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #515a6e;
        width: 1.57 * 100px;
        height: 0.32 * 100px;
        line-height: 0.32 * 100px;
        div {
          width: 0.13 * 100px;
          height: 0.13 * 100px;
          border-radius: 50%;
        }
      }
    }
    #pie_li2 {
      width: 320px;
      //min-width: 320px;
      //height: 100%;
      margin-top: 150px;
      //position: absolute;
      //right: 1.2 * 100px;
      //top: 7.24 * 100px;
      //padding-left: 10%;
      caption {
        font-size: 0.28 * 100px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #17233d;
      }
      th {
        font-size: 0.14 * 100px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #808695;
      }
      tr {
        font-size: 0.14 * 100px;
        font-family: Helvetica-Bold, Helvetica;
        font-weight: bold;
        color: #515a6e;
        height: 0.32 * 100px;
        line-height: 0.32 * 100px;
        div {
          width: 0.13 * 100px;
          height: 0.13 * 100px;
          border-radius: 50%;
        }
      }
    }
    #pie {
      min-width: 375px;
      width: 690px;
      //height: 100%;
    }
    #pie_logo {
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }
  @media screen and (max-width: 768px) {
    #h_pie {
      width: 100%;
      height: 13 * 100px;
      //background: url(../../assets/img/banner.png) no-repeat;
      //background-size: 100% 100%;
      background-color: #f3f1ff;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      //justify-content: space-evenly;
      #pie_li1 {
        width: 80%;

        //height: 100%;
        margin-top: 50px;
        //position: absolute;
        //left: 1.2 * 100px;
        //top: 7.24 * 100px;
        table {
          width: 100%;
        }
        caption {
          font-size: 0.28 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #17233d;
        }
        th {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #808695;
        }
        tr {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #515a6e;
          width: 1.57 * 100px;
          height: 0.32 * 100px;
          line-height: 0.32 * 100px;
          div {
            width: 0.13 * 100px;
            height: 0.13 * 100px;
            border-radius: 50%;
          }
        }
      }
      #pie_li2 {
        width: 80%;

        //height: 100%;
        margin-top: 0px;
        //position: absolute;
        //right: 1.2 * 100px;
        //top: 7.24 * 100px;
        table {
          width: 100%;
        }
        caption {
          font-size: 0.28 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #17233d;
        }
        th {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #808695;
        }
        tr {
          font-size: 0.14 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #515a6e;
          height: 0.32 * 100px;
          line-height: 0.32 * 100px;
          div {
            width: 0.13 * 100px;
            height: 0.13 * 100px;
            border-radius: 50%;
          }
        }
      }
      #pie {
        width: 690px;
        height: 350px;
      }
    }
  }
  #h_sea {
    height: 4.15 * 100px;
    width: 100%;
    background-color: #4629c0;
    position: relative;
    h2 {
      width: 3.73 * 100px;
      height: 0.45 * 100px;
      margin: 0 auto 0.41 * 100px auto;
      font-size: 0.32 * 100px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      line-height: 0.45 * 100px;
      text-align: center;
    }
    #sea_box {
      //width: 13 * 100px;
      width: 90%;
      height: 2.25 * 100px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      .sea:nth-child(1) {
        background-image: url(~@/assets/img/pic1.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .sea:nth-child(2) {
        background-image: url(~@/assets/img/pic2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .sea:nth-child(3) {
        background-image: url(~@/assets/img/pic3.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .sea {
        display: inline-block;
        //width: 3.9 * 100px;
        width: 30%;
        height: 2.25 * 100px;
        text-align: center;
        position: relative;
        .sea_title {
          display: flex;
          //text-align: center;
          align-items: center;
          justify-content: center;
          margin-top: 0.69 * 100px;
          width: 100%;
          //padding: 0 0.6 * 100px;
          height: 0.84 * 100px;
          font-size: 0.24 * 100px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #ffffff;
          background: rgba(41, 32, 77, 0.85);
        }
        .sea_title2 {
          display: none !important;

          //text-align: center;

          width: 100%;
          padding-top: 55px;
          height: 100%;
          font-size: 16px;
          font-family: Helvetica;
          color: #ffffff;
          background: rgba(41, 32, 77, 0.85);
          box-sizing: border-box;
        }
        &:hover {
          .sea_title2 {
            display: block !important;
          }
          .sea_title {
            display: none;
          }
        }
        .sea_ico {
          width: 0.24 * 100px;
          height: 0.24 * 100px;
          background: linear-gradient(to left, #5564fe, #8853ff);
          color: #fff;
          font-size: 0.14 * 100px;
          position: absolute;
          bottom: 3px;
          right: 3px;
        }
      }
    }
    #s_lodder {
      position: absolute;
      top: -23px;
      left: 50%;
      margin-left: -2.28 * 100px;
      border-width: 0 0.4 * 100px 0.23 * 100px 0.4 * 100px;
      border-color: transparent transparent #4629c0 transparent;
      border-style: solid;
      width: 3.76 * 100px;
    }
    #x_looder {
      position: absolute;
      bottom: -23px;
      left: 50%;
      margin-left: -2.28 * 100px;
      border-width: 0.23 * 100px 0.4 * 100px 0 0.4 * 100px;
      border-color: #4629c0 transparent transparent transparent;
      border-style: solid;
      width: 3.76 * 100px;
    }
  }
  @media screen and (max-width: 768px) {
    #h_sea {
      //height: 4.15 * 100px;
      //width: 100%;
      background-color: #4629c0;
      width: 100%;
      height: 800px;
      h2 {
        width: 3.73 * 100px;
        height: 0.45 * 100px;
        margin: 0 auto 0.41 * 100px auto;
        font-size: 0.32 * 100px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 0.45 * 100px;
      }
      #sea_box {
        width: 100%;
        height: 700px;
        margin: 0 auto;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;
        .sea:nth-child(1) {
          background-image: url(~@/assets/img/pic1.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .sea:nth-child(2) {
          background-image: url(~@/assets/img/pic2.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .sea:nth-child(3) {
          background-image: url(~@/assets/img/pic3.png);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .sea {
          display: inline-block;
          width: 80%;
          height: 2.25 * 100px;
          text-align: center;
          position: relative;
          .sea_title {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.69 * 100px;
            width: 100%;
            padding: 0;
            height: 0.84 * 100px;
            font-size: 0.24 * 100px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #ffffff;
            background: rgba(41, 32, 77, 0.85);
          }
          .sea_ico {
            width: 0.24 * 100px;
            height: 0.24 * 100px;
            background: linear-gradient(to left, #5564fe, #8853ff);
            color: #fff;
            font-size: 0.14 * 100px;
            position: absolute;
            bottom: 3px;
            right: 3px;
          }
        }
      }
      #s_lodder {
        display: none;
      }
      #x_looder {
        display: none;
      }
    }
  }
  #statistic {
    width: 100%;
    height: 6 * 100px;
    background: #ffffff;
    #s_title {
      width: 1.27 * 100px;
      height: 0.45 * 100px;
      font-size: 0.32 * 100px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #17233d;
      line-height: 0.45 * 100px;
      margin: 0.51 * 100px auto 0;
    }
  }
}
</style>
